<script setup lang="ts">
import type { IOptionItem } from '../me'

interface Props {
  options?: IOptionItem[]
}

const props = withDefaults(defineProps<Props>(), {
  options: () => [],
})

// 处理选项点击
function handleOptionClick(option: IOptionItem) {
  if (option.onClick) {
    option.onClick()
  }
  else {
    // 默认行为，可以根据需要添加路由跳转等
    console.log('点击了选项:', option.title)
  }
}
</script>

<template>
  <view class="mx-4 overflow-hidden rounded-xl bg-white shadow-sm">
    <view
      v-for="(option, index) in options"
      :key="option.id"
      class="flex items-center justify-between p-4 transition-colors active:bg-gray-50"
      :class="{ 'border-b border-gray-100': index < options.length - 1 }"
      @tap="handleOptionClick(option)"
    >
      <!-- 左侧图标和文字 -->
      <view class="flex items-center space-x-3">
        <view
          :class="option.icon"
          class="text-lg text-gray-600"
        />
        <view>
          <view class="text-gray-900 font-medium">
            {{ option.title }}
          </view>
          <view v-if="option.description" class="mt-1 text-sm text-gray-500">
            {{ option.description }}
          </view>
        </view>
      </view>

      <!-- 右侧箭头 -->
      <view
        v-if="option.showArrow !== false"
        class="i-carbon-chevron-right text-gray-400"
      />
    </view>
  </view>
</template>

<style scoped>
</style>
